<template>
  <view class="bg">
    <block v-for="item in arr" :key="item.title"
      ><el-badge :value="item.value" :hidden="item.value <= 0" class="item">
        <view class="box" @tap="jump(item)">
          <i :class="'icon ' + item.icon" :style="'color:' + item.color"></i>
          <text>{{ item.title }}</text>
        </view>
      </el-badge>
    </block>
  </view>
</template>

<script>
var vk = uni.vk; // vk实例

export default {
  data() {
    return {
      arr: [
        {
          icon: "el-icon-s-custom",
          color: "rgb(105, 192, 255)",
          title: "",
          value: 0,
          url: "/pages/user/list",
        },
        {
          icon: "el-icon-user-solid",
          color: "rgb(149, 222, 100)",
          title: "",
          value: 0,
          url: "/pages/salesperson_user/list",
        },
        {
          icon: "el-icon-s-goods",
          color: "rgb(255, 156, 110)",
          value: 0,
          title: "",
          url: "/pages/goods/list",
        },
        {
          icon: "el-icon-s-order",
          value: 0,
          color: "rgb(179, 127, 235)",
          title: "",
          url: "/pages/order/list",
        },
        {
          icon: "vk-icon-jiagoufenxiao",
          color: "rgb(92, 219, 211)",
          value: 0,
          title: "",
          url: "/pages/salesman/setting",
        },
        {
          icon: "vk-icon-tixianguanli",
          color: "DodgerBlue",
          value: 0,
          title: "",
          url: "/pages/finance/withdraw/list",
        },

        {
          icon: "el-icon-s-management",
          color: "Violet",
          value: 0,
          title: "",
          url: "/pages/discount/coupon/list",
        },
        {
          icon: "vk-icon-settings",
          color: "#F56C6C",
          title: "",
          value: 0,
          url: "/pages/shop/setting",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    jump(item) {
      if (!item.url) return;
      vk.navigateTo(item.url);
    },
    init() {
      vk.callFunction({
        url: "admin/business/kh.stats.getTodoList",
        title: "",
        data: {},
      }).then((data) => {
        this.arr = data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  padding-bottom: 20px;
  display: flex;
  .box:last-child {
    margin-right: 0;
  }
}

.item {
  flex: 1;
  background-color: #fff;
  margin-right: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  font-size: 14px;
  &:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin: -6px 20px 6px 0;
  }
}

.box {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  .icon {
    font-size: 32px;
    margin-bottom: 8px;
  }
}
</style>
